<!-- 
  pinia 状态管理器
    一大核心：store
    三大配置：
        state
        getters
        actions
    三个辅助函数：(不用)
      mapState
      mapGetters
      mapActions

  1. 没有 modules 配置了，在 vuex 中只有一个 store, 而 pinia 可以有多个 store
  2. 没有 mutations 配置了，大家已经苦 mutations 久了。
    acionts 配置中的每一个 action 都可以直接修改 state 数据了。
  3. pinia 主要的核心操作是 基于组合式函数的玩法。
  4. pinia 对 ts 更友好。能够更好的提供类型推导。而且我们不需要使用哪些 字符串类型
  5. pinia 可以认为是 vuex5


  使用步骤：
    1. 安装 pinia
      npm install pinia

    2. 创建 store
      1. src/stores/xx.js
      2. src/stores/yy.js

      一个js就导出一个 pinia 的 store

    3. main.js 需要注册 pinia

    4. 使用 store 的数据

  一个 store 的实例对象上有哪些东西：
    1. 以 $开头 的实例属性与实例方法
        1. $id          - 当前 store 的标识 
        2. $reset()     - 调用它可以重置该store的数据
        3. $subscribe() - 订阅 state 数据的变化，用于实现自定义pinia插件
        4. $onAction()  - 监听 action 的调用
        5. $state       - 仓库的state数据，是个 Proxy 对象
        6. $patch()     - 用于修改 state 数据
    2. 代理数据与代理方法（创建store时配置的 state 数据，getters 数据，actions 数据）

  当store的组合式函数没有被使用时，pinia是没有管理它的。当第一次被使用时，pinia就管理起来了。后续再次调用不会重新初始化。


  store 实例是一个 Proxy 对象，不要对它做解构操作，会失去响应式，如果一定要解构，可以使用 pinia 提供的 storeToRefs 或者 vue 提供的 toRefs
      更推荐 storeToRefs ，应为它只转换 state 与 getter 数据。
 -->

<template>
  <div>
    <h1>App</h1>

    <hr />

    <Hello />

    <hr />
    <World />

    <hr />

    <p>xxStore.count: {{ xxStore.count }}</p>
    <button @click="fn1">$patch 修改 state - 方式一 - 对象</button>
    <button @click="fn2">$patch 修改 state - 方式二 - 函数</button>
  </div>
</template>

<script setup>
import Hello from './components/Hello.vue'
import World from './components/World.vue'

import { useXxStore } from './stores/xx'
const xxStore = useXxStore()

const fn1 = () => {
  xxStore.$patch({ count: 20 })
}

const fn2 = () => {
  // 用函数的方式，更灵活，可以获取到 state 这个参数，基于现有数据来修改
  xxStore.$patch((state) => {
    state.count = state.count + 30
  })
}
</script>
